<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#wrapper {
	margin: 30px auto 0;
	border: 1px solid #f2f2f2;
	border-radius: 3px;
	box-shadow: 0 0 2px #efefef;
	padding: 10px 30px 30px;
	max-width: 400px;
	min-width: 300px;
	background-color: #ffffff;
}

a:hover {
	color: OrangeRed;
}

a {
	color: OrangeRed;
	font-weight: bold;
}

.checkbox {
	color: #aaa;
}

.form .input-group .form-control:focus,.form .input-group-addon .form-control:focus
	{
	background-color: white;
}

.form .input-group .form-control {
	border-radius: 0 2px 2px 0;
	border-color: #efefef;
	box-shadow: 0 0 2px #f2f2f2;
	background-color: #fafafa;
}

.form .input-group .input-group-addon {
	border-radius: 2px 0 0 2px;
	border-color: #efefef;
	box-shadow: 0 0 2px #f2f2f2;
}

.form .input-group {
	margin: 20px auto;
}

#wrapper h3 {
	color: #f0ad4e;
	text-shadow: 0px 1px 1px #f0ad4e;
}

#register .form .glyphicon.glyphicon-asterisk {
	color: red;
	left: -5px;
	position: absolute;
	top: -5px;
	z-index: 10;
}

body {
	background-color: #eee;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="login">
		<%
			String errorMessage = request.getParameter("errorMessage");
			if (errorMessage != null) {
		%>
		<div class="alert alert-danger" role="alert"><%=errorMessage%></div>
		<%
			}
		%>
		<h3>Sign In</h3>
		<hr>
		<form method="post" action="user/login">
			<div class="form">
				<h4>
					<small>Sign in using your registered account:</small>
				</h4>

				<div class="input-group input-group-lg">
					<span class="input-group-addon glyphicon glyphicon-user"></span>
					<input type="text" class="form-control" name="username" placeholder="Username">
				</div>
				<div class="input-group input-group-lg">
					<span class="input-group-addon glyphicon glyphicon-lock"></span>
					<input type="password" class="form-control" name="password" placeholder="Password">
				</div>
				<div class="row">
					<div class="col-xs-6">
						<!-- <div class="checkbox">
							<label>
								<input type="checkbox">
								Keep me signed in
							</label>
						</div> -->
					</div>
					<div class="col-xs-6" style="text-align: right;">
						<button class="btn btn-warning">
							<span class="glyphicon glyphicon-log-in"></span>
							&nbsp;Sign In
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>

</div>
<h4 style="text-align: center;">
	<small>
		Don't have an account?
		<a href="register">Register</a>
	</small>
</h4>
<!-- <h4 style="text-align: center;">
	<small>
		Remind
		<a href="javascript:void(0)" id="remind-password">Password</a>
	</small>
</h4>-->
<script type="text/javascript" src="js/login.js">
	
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.1.min.js"></script>

<script src="js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>